<template>
	<view>
		<cu-custom :isBack="true">
		</cu-custom>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="keyword" :adjust-position="false" type="text" confirm-type="search" />
			</view>
			<view class="action" @tap="pageGetSystemDoc()">
				<text>{{$t('search')}}</text>
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item,index) in docList" :key="index" @tap="gotoDocContent(item)">
				<view class="cu-avatar round lg" :style="{'background-image':`url(${item.iconUrl})`}"></view>
				<view class="content">
					<view class="text-grey">{{item.title}}</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut flex">
							<view v-for="(k,i) in item.keywordList" :key="i" class="margin-right-xs">
								<view class='cu-tag text-white' :style="{backgroundColor:themeConfig.primaryColor}">
									{{k}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {formatDateTime} from '@/util/formatTime.js'
	import * as iotDocSystemApi from '@/api/iot/iotDocSystemApi.js'
	import * as storage from '@/util/storage.js'
	export default {
		data() {
			return {
				docList: [],
				companyId: storage.getCompanyId(),
				language: storage.getLanguage(),
				keyword: null,
				pageSize: 100,
				currentPage: 1
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		created() {
			this.pageGetSystemDoc()
		},
		methods: {
			gotoDocContent(item) {
				uni.navigateTo({
					url: `/pages/docContent/docContent?id=${item.id}`
				})
			},
			formatDateTime(timestamp) {
				return formatDateTime(timestamp, this.$t('unKnow'))
			},
			pageGetSystemDoc() {
				iotDocSystemApi.pageGetSystemDoc({
					language: this.language,
					keyword: this.keyword,
					pageSize: this.pageSize,
					currentPage: this.currentPage
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						this.docList = data.data
					}
				})
			}
		}
	}
</script>

<style>

</style>
